<template>
  <div style="height:100%;">
   
  <div style="height:44px;">
     <sticky scroll-box="vux_view_box_body" ref="sticky" :offset="46" :check-sticky-support="false">
      <search
          @result-click="resultClick"
          @on-change="getResult"
          :results="results"
          v-model="value"
          position="absolute"
          auto-scroll-to-top top="46px"
          @on-focus="onFocus"
          @on-cancel="onCancel"
          @on-submit="onSubmit"
          ref="search"></search>
         <tab :line-width=2 active-color='#fc378c' v-model="index" >
          <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index"  badge-background="#38C972" badge-color="#fff" @on-item-click="handler">{{item}}</tab-item>
        </tab>
        <cell :border-intent="false" :title="item.value"  is-link class="tab-swiper vux-center" v-for="(item, index) in searchLists" :key="index">
          <div class="badge-value">
            独立账号
          </div>
        </cell>
      <drag-list v-if="validaty==0" :model='personData' :current-highlight='true' :default-text='"New A Girl"' :hover-color='"lightblue"' :highlight-color='"green"'></drag-list>
      <drag-list v-if="validaty==1" :model='goodsData' :current-highlight='true' :default-text='"New A Girl"' :hover-color='"lightblue"' :highlight-color='"green"'></drag-list>
      <div class='changeTree' @click="buildTitle" style="margin-left:8%">
        <x-icon type="plus-round" ></x-icon>
        <span :style="{verticalAlign:'5px'}" >新建</span>
      </div>
     </sticky>
   </div>
   <div transfer-dom>
     <x-dialog v-model="showToast" class="dialog-demo" @on-show="clearall">
       <div >
        <checklist  v-if="goodsGetters.length>0" :options="goodsGetters" v-model="radioValue"  @on-change="changeRadio"></checklist>
        <h1 v-else>暂无数据！</h1>
       </div>
       <div class="weui-dialog__ft">
        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click="canCelRadio">取消</a> 
        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="confirmRadio">确认</a>
      </div>
     </x-dialog>
   </div>
 </div>
</template>
<script type="application/ecmascript">
  import * as types from '@/vuex/types'
  import { mapGetters,mapState } from 'vuex'
  import DragList from '@/components/DragList'
  import routers from '@/router'
  import { Search,Tab, TabItem, Sticky,CellBox,Group,Cell,Badge,XButton,XDialog,Checklist } from 'vux'
  import _ from 'lodash'
  const list = () => ['人', '物']
  export default {
    components: {
      Search,
      Tab,
      TabItem,
      Sticky,
      CellBox,
      Group,
      Cell,
      Badge,
      DragList,
      XButton,
      XDialog,
      Checklist
    },
    watch:{
      searchtext:_.debounce(function (oldVal,newVal){  
      if(this.validaty==0){
        if(oldVal!=''){
          let items = this.personGetters
          var searchRegex = new RegExp(this.searchtext, 'i');
          let arr = _.find(items, function(o) { return searchRegex.test(o.value) });
          if(arr){
          this.searchLists = []
          this.searchLists.push(arr);
          }
        }else{
          this.searchLists = this.personGetters
        }
      }else{
        if(oldVal!=''){
          let items = this.goodsGetters
          var searchRegex = new RegExp(this.searchtext, 'i');
          let arr = _.find(items, function(o) { return searchRegex.test(o.value) });
          if(arr){
          this.searchLists = []
          this.searchLists.push(arr);
          }
        }else{
          this.searchLists = this.goodsGetters
        }   
      }
      },300)
    },
    name: 'listView',
    data () {
      return {
        searchtext:null,
        token: '',
        list2:list(),
        index: 0,
        demo2:'人',
        results: [],
        value: '',
        radioValue:[],
        searchLists:'',
      }
    },
    computed:{
      ...mapGetters({
        personGetters:['listView/personGetters'],
        goodsGetters:['listView/goodsGetters'],

      }),
      ...mapState({
        personData:state => state.listView.personData,
        goodsData:state => state.listView.goodsData,
        validaty:state => state.listView.validaty,
        showToast:state => state.listView.showToast,
      }),
      tabs(){

        return this.personGetters
      },
    },
    mounted(){
      this.$store.commit(types.CHANGEMORE, false);
      this.$store.commit(types.ADDSTATUS, true);
      this.$store.commit(types.ROUTESTATES, 'list');
      //获取OPENID值
      let token = this.$route.params.openid
      //console.log(token)
      this.$store.commit('login/'+types.LOGIN,{token})
      this.$store.dispatch(types.GETLISTCONTENT,token)
      this.searchLists = this.personGetters
    },
    methods: {
      clearall(){
        this.radioValue = []
        console.log(1)
      },
      canCelRadio(){
        this.$store.commit(types.HIDEDIALOG,false)
      },
      confirmRadio(){
        if(this.radioValue.length!=0){
          this.$store.commit(types.UPDATEDIALOG,this.radioValue)
        }else{
          this.canCelRadio()
        }
      },
      changeRadio(val, label){
        
        //console.log('change', val, label)
      },

      buildTitle(){
        const _this = this
        _this.$vux.confirm.prompt('请填写名称', {
          title: '新增标签',
          onConfirm (msg) {
            _this.value2 = false
            _this.$store.commit(types.ADDTITLES,msg)

          }
        })
      },
      handler(index){
        if(index==0){
          this.searchLists = this.personGetters
        }else{
          this.searchLists = this.goodsGetters
        }
        this.$store.commit(types.VALIDATY, index);
      },
      resultClick (item) {
        window.alert('you click the result item: ' + JSON.stringify(item))
      },
      getResult(val) {
        this.searchtext = val
      },
      onSubmit () {
      },
      onFocus () {

      },
      onCancel () {

      }
    },
  }

</script>